import { BlockEnum, NodeProps } from '@/components/workflow/types'
import { useWorkFlowStore } from '@/store/workflowStore'
import { generateUUIDv4 } from '@/util/utils'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { ComponentDescMap } from '../../constants'
import { NodeSourceHandle } from '../components/node-handle'
import '../style.less'

const IfElseNode: FC<NodeProps<any>> = ({ id, data }: any) => {
  console.log('IfElseNode :>> ', id, data)
  const { flowVariables } = useWorkFlowStore()
  const [cases, setcases] = useState([])

  useEffect(() => {
    if (flowVariables[data.id]) {
      setcases(flowVariables[data.id].ifList)
    }
  }, [flowVariables])
  return (
    <div className="workflow-common-node">
      <div className="common-node-desc">{data.desc || ComponentDescMap[BlockEnum.IfElse]}</div>
      {/* if elif */}
      {cases.map((caseItem, index) => (
        <div key={caseItem.case_id + generateUUIDv4()}>
          <div className="relative mb-[8px] flex items-center px-1">
            <div className="flex w-full items-center justify-between">
              <div className="pandl_node_title">{cases.length > 1 && `CASE ${index + 1}`}</div>
              <div
                className="domOverflowEllip semi-typography coz-typography coz-text semi-typography-primary semi-typography-normal font-normal leading-[20px]"
                style={{ fontSize: '12px' }}
              >
                {index === 0 ? 'IF' : 'ELIF'}
              </div>
            </div>
            <NodeSourceHandle
              id={caseItem.case_id}
              data={data}
              handleId={caseItem.case_id}
              handleClassName="!top-1/2 !-translate-y-1/2 -right-[12px]"
            />
          </div>
        </div>
      ))}
      {/* else */}
      <div className="relative flex items-center px-1">
        <div
          className="domOverflowEllip semi-typography coz-typography coz-text semi-typography-primary semi-typography-normal w-full text-right font-normal leading-[20px]"
          style={{ fontSize: '12px' }}
        >
          ELSE
        </div>
        <NodeSourceHandle
          id={id}
          data={data}
          // handleId="right_handle"
          handleId={'right_handle_' + id}
          handleClassName="!top-1/2 !-translate-y-1/2 -right-[12px]"
        />
      </div>
    </div>
  )
}
export default React.memo(IfElseNode)

/* <div className="space-y-0.5">
            {caseItem.conditions.map((condition, i) => (
              <div key={condition.id} className="relative">
                {checkIsConditionSet(condition) ? (
                  !isEmptyRelatedOperator(condition.comparison_operator!) && condition.sub_variable_condition ? (
                    <ConditionFilesListValue condition={condition} />
                  ) : (
                    <ConditionValue
                      variableSelector={condition.variable_selector!}
                      operator={condition.comparison_operator!}
                      value={condition.value}
                    />
                  )
                ) : (
                  conditionNotSet
                )}
                {i !== caseItem.conditions.length - 1 && (
                  <div className="text-text-accent absolute bottom-[-10px] right-1 z-10 text-[10px] font-medium uppercase leading-4">
                    {t(`${i18nPrefix}.${caseItem.logical_operator}`)}
                  </div>
                )}
              </div>
            ))}
          </div> */
